<template>
  <div class>
    <el-card>
      <el-tree
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
        :props="props"
        :data="data"
        node-key="id"
      >
        <span class="custom-tree-node" slot-scope="{ node,data }">
          <span>{{ node.label }}</span>
          <span class="right">
            <span v-for=" item in data.functionList" :key="item.id">{{item.functionName}}</span>
            <el-button type="text" @click="dialogShow = true">操作</el-button>
          </span>
        </span>
      </el-tree>
    </el-card>
    <el-dialog :title="`操作管理-${chackedNode.functionName}`" :visible.sync="dialogShow">
      <el-card class="btns">
        <el-button size="medium" type="primary" @click="addItem">增加</el-button>
      </el-card>
      <el-table :data="chackedNode.functionList" border stripe style="width: 100%">
        <el-table-column prop="functionName" label="功能名称"></el-table-column>
        <el-table-column prop="functionUrl" label="功能路径"></el-table-column>
        <el-table-column prop="functionOrderNum" label="功能序号"></el-table-column>
        <el-table-column prop="functionIntroduce" label="备注"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editItem(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteItem(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="操作管理" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="功能名称">
          <el-input v-model="form.functionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="功能路径">
          <el-input v-model="form.functionUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="功能序号">
          <el-input v-model="form.functionOrderNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.functionIntroduce" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList } from "@/functions/menuList";
import { addItem, deleteItem, editItem } from "./function";
export default {
  components: {},
  data() {
    return {
      dialogShow: false,
      isAdd: false,
      dialogFormVisible: false,
      form: {
        parentId: "",
        functionName: "",
        functionUrl: "",
        functionIntroduce: "",
        functionOrderNum: "",
        menuFlag: "2", //固定参数
        nodeType: "2", //固定参数
        title: "",
        nodeKey: ""
      },
      data: [],
      props: {
        label: "functionName",
        children: "children"
      },
      chackedNode: {}
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      getMenuList().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.data = res.retBody;
        }
      });
      this.chackedNode = {};
    },
    handleNodeClick(v) {
      console.log(v);
      this.chackedNode = v;
    },
    ok() {
      if (this.isAdd) {
        this.handleAdd();
      } else {
        this.handleEdit();
      }
    },
    handleAdd() {
      this.form.parentId = this.chackedNode.id;
      this.form.menuFlag = "2"; //固定参数
      this.form.nodeType = "2"; //固定参数
      addItem(this.form).then(res => {
        this.dialogFormVisible = false;
        this.dialogShow = false;
        if (res.retHead.code == "0000000") {
          this.$message.success("操作成功！");
          this.init();
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    handleEdit() {
      this.form.menuFlag = "2"; //固定参数
      this.form.nodeType = "2"; //固定参数
      editItem(this.form).then(res => {
        this.dialogFormVisible = false;
        this.dialogShow = false;
        if (res.retHead.code == "0000000") {
          this.$message.success("操作成功！");
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    deleteItem(v) {
      let params = {
        id: v.id
      };
      deleteItem(params).then(res => {
        this.dialogShow = false;
        if (res.retHead.code == "0000000") {
          this.$message.success("操作成功！");
          this.init();
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    addItem() {
      this.isAdd = true;
      this.dialogFormVisible = true;
      this.form = {};
    },
    editItem(v) {
      console.log(v);
      this.isAdd = false;
      this.dialogFormVisible = true;
      this.form = v;
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .right {
    text-align: right;
    * {
      margin: 0 10px;
    }
  }
}
</style>